<template>
  <div class="space-content">
    <!-- 标题与控制栏 -->
    <div class="header">
      <div class="header-title">空间列表</div>
      <div class="header-controls">
         <el-radio-group v-model="selectedType" class="space-type-selector">
          <el-radio-button label="官方空间">官方空间</el-radio-button>
          <el-radio-button label="公开空间">公开空间</el-radio-button>
          <el-radio-button label="个人门户">个人门户</el-radio-button>
        </el-radio-group>


        <el-input placeholder="搜索" class="search-box" size="mini"></el-input>


         <DataFilter :filters="filters" @onFilterChange="handleFilterChange" />

        <el-button type="primary" class="create-space-button" @click="toggleCreateSpaceDrawer">
          申请创建空间
        </el-button>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <el-skeleton :rows="5" animated />
    </div>

    <!-- 空间列表展示区 -->
    <div v-else class="space-container">
      <SpaceCard
          v-for="(space, index) in mySpaces"
          :key="space.id || index"
      :spaceLogo="space.spaceLogo"
      :spaceBackground="space.spaceBackground"
      :spaceName="space.spaceName"
      :spaceTags="space.spaceTags"
      :spaceType="space.spaceType"
      :createTime="space.createTime"
      :isFree="space.isFree"
      :fee="space.fee"
      @view-space-details="viewSpaceDetails"
      @edit-space-tags="editSpaceTags"
      @exit-space="exitSpace"
      />
    </div>

    <!-- CreateSpaceDrawer 组件 -->
    <CreateSpaceDrawer
        v-model="isCreateSpaceDrawerVisible"
        :tagsSource="tagsSource"
        @save="onDrawerSave"
    />
  </div>
</template>

<script>
import SpaceCard from '@/components/cards/SpaceCard.vue';
import DataFilter from '@/components/filter/Filter.vue';
import CreateSpaceDrawer from './Drawer/CreateSpaceDrawer.vue';
import { getSpacePage } from '@/service/space/space.service';  // 导入接口方法

export default {
  components: {DataFilter, SpaceCard, /* DataFilter, */ CreateSpaceDrawer},
  data() {
    return {
      loading: true,       // 新增加载状态
      selectedType: '官方空间',
      // filters: [ ... ],  // 暂时注释筛选配置
      filters: [
        {
          field: 'spaceName',
          type: 'string',
          method: 'contains',
          label: '空间名称',
        },
        {
          field: 'spaceTags',
          type: 'enum',
          method: 'equals',
          multiSelect: true,
          logic: 'or',
          options: [
            {label: '编程', value: '编程'},
            {label: '咖啡', value: '咖啡'},
            {label: '读书', value: '读书'},
            {label: '英语', value: '英语'},
            {label: '动漫', value: '动漫'},
          ],
          label: '空间标签',
        },
        {
          field: 'createdTime',
          type: 'date',
          method: 'range',
          label: '创建时间',
        },
      ],
      mySpaces: [],       // 初始化为空数组，由接口填充
      isCreateSpaceDrawerVisible: false,
      tagsSource: [
        {id: 1, label: '编程'},
        {id: 2, label: '咖啡'},
        {id: 3, label: '读书'},
        {id: 4, label: '英语'},
        {id: 5, label: '动漫'},
      ],
    };
  },
  mounted() {
    this.loadSpaceList();
  },
  methods: {
    // 加载空间列表
    loadSpaceList() {
      const params = {
        currentPage: 1,
        pageSize: 1000
      };

      this.loading = true;

      // 使用回调方式调用分页接口
      getSpacePage(
          params,
          (response) => {  // 成功回调
            if (response?.data?.list) {
              this.mySpaces = response.data.list;
            } else {
              console.error('响应数据异常:', response);
              this.$message.error('数据加载失败');
            }
            this.loading = false;
          },
          (error) => {    // 失败回调
            console.error('请求失败:', error);
            this.$message.error(`加载失败: ${error.message || '未知错误'}`);
            this.loading = false;
          }
      );
    },
    toggleCreateSpaceDrawer() {
      this.isCreateSpaceDrawerVisible = !this.isCreateSpaceDrawerVisible;
    },
    // handleFilterChange() { ... },  // 暂时注释筛选逻辑
    viewSpaceDetails(spaceName) {
      console.log(`查看空间详情: ${spaceName}`);
    },
    editSpaceTags(spaceName) {
      console.log(`修改空间标签: ${spaceName}`);
    },
    exitSpace(spaceName) {
      console.log(`退出空间: ${spaceName}`);
    },
    onDrawerSave() {
      console.log('空间创建成功！');
      this.isCreateSpaceDrawerVisible = false;
      this.loadSpaceList();  // 创建成功后刷新列表
    },
  },
};
</script>

<style scoped>
.space-content {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

/* 标题与控制栏 */
.header {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  margin-bottom: 24px;
  border-bottom: 1px solid #ebeef5;
}

.header-title {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  min-width: 180px;
}

.header-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* 控件样式优化 */
.space-type-selector {
  flex-shrink: 0;
}

.search-box {
  width: 240px;
  transition: all 0.3s;
}

.create-space-button {
  flex-shrink: 0;
  margin-left: auto;
  padding: 8px 20px;
  border-radius: 8px;
}

/* 加载状态 */
.loading-container {
  padding: 40px 0;
  background: rgba(245, 247, 250, 0.8);
  border-radius: 8px;
}

/* 空间列表容器 */
.space-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 48px; /* 调整间距 */
  padding: 16px 0;
  justify-content: center; /* 居中对齐 */
  align-content: center;
}

/* 让 SpaceCard 组件的外层 div 增加 margin，确保卡片之间有间隙 */
.space-container >>> .space-card {
  margin-bottom: 5px; /* 额外的底部间距 */
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 卡片悬停效果 */
.space-container >>> .space-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.1);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .space-container {
    grid-template-columns: 1fr;
  }


  .header-controls {
    width: 100%;
    flex-direction: column;
    gap: 16px;
  }

  .search-box {
    width: 100%;
  }

  .space-container {
    grid-template-columns: 1fr;
  }
}

/* 骨架屏优化 */
.loading-container >>> .el-skeleton__item {
  border-radius: 8px !important;
  margin: 8px 0;
}

.loading-container >>> .el-skeleton__p {
  width: 80% !important;
}
</style>